<template>
<view>
		<custom-navigation-bar title=""></custom-navigation-bar>
		<view class="a_top">
			<view class="a_menu">
				<view style="width: 80%;height:80rpx;float: left;line-height: 80rpx;">
					<input v-model="name" type="text" placeholder="请输入商品名称查询" style="width: 100%;line-height: 80rpx;float: left;height: 80rpx;text-align: center;"/>
				</view>
				<view @click="nameQuery" style="text-align: center;width: 17%;height: 60rpx;line-height: 60rpx;background:#2AE8DC;color: white;float: right;border-radius: 20rpx;margin-top: 10rpx;margin-right: 10rpx;">
					查询
				</view>
			</view>
		</view>
		<view class="main" >
			<view class="info-menu">
				<view style="width: 100%;float: left;height: 30rpx;"></view>
				<view v-for="(item,index) in menuArr" :key="index"  >
					<view v-if="item.id==menuIndex" class="sq_select" @click="menuSelect(item)">{{item.name}}</view>
					<view v-if="item.id!=menuIndex" class="sq"  @click="menuSelect(item)">{{item.name}}</view>
				</view> 
			</view>
			<view class="info-box" >
				<view class="info-title" >{{menuName}}</view>
				<view v-if="menuId!=3" style="width: 95%;float: left;height: 50rpx;margin-left: 5%">
					<view  v-for="(item,index) in type" :key="index">
						<label v-if="item.id==typeIndex" class="type_se" @click="selectType(item)">{{item.name}}</label>
						<label v-if="item.id!=typeIndex" class="type_def" @click="selectType(item)">{{item.name}}</label>
					</view> 
				</view>
				<view v-if="menuId!=3" style="width: 95%;float: left;line-height: 40rpx;margin-left: 5%;">
					<view  v-for="(item,index) in shotArr" :key="index">
						<label v-if="item.id==shotIndex" class="type_se" @click="selectShot(item)">{{item.name}}</label>
						<label v-if="item.id!=shotIndex" class="type_def" @click="selectShot(item)">{{item.name}}</label>
					</view> 
				</view>
				<scroll-view style="width: 100%;height: 100%;float: left;"  scroll-y="true" @scrolltoupper="upper"
					@scrolltolower="lower" @scroll="scroll">
					<view v-if="goods.length>0">
						<view class="goods_item" v-for="(item,index) in goods" :key="index" @click="goodsDetail(item)">
							 <view class="goods_item_img">
								 <image :src="item.thumbnail" class="goods_img"></image>
								 <view class="tg_01" v-if="menuId!=3">
									 <label style="float: left;background: #2AE8DC;width:60rpx;font-size: 25rpx;">团购</label>
									 <image  src="/static/dingwei001.png" style="width: 25rpx;height: 25rpx;margin-top: 8rpx;float: left;"></image>
									 <label  style="float: left;font-size: 18rpx;">{{item.juLi}}</label>
								 </view>
								 <view class="tg_01" v-if="menuId==3" style="width: 60rpx;">
									 <label style="float: left;background: #2AE8DC;width:60rpx;font-size: 25rpx;">团购</label>
									 <image  src="/static/dingwei001.png" style="width: 25rpx;height: 25rpx;margin-top: 8rpx;float: left;"></image>
									 <label  style="float: left;font-size: 18rpx;">{{item.juLi}}</label>
								 </view>								 
							 </view>
							 <view class="goods_item_info">
								<view class="goods_item_info_title">
									{{item.name}}
								</view>
								<view class="goods_item_info_1" v-if="menuId!=3">
									<view v-for="(i,index) in 5" style="float: left;" :key="index">
										<image v-if="item.score>=i" src="../../static/ic_xing@3x(1).png" style="width: 20rpx;height:20rpx;margin-left: 5rpx;"></image>
										<image v-if="item.score>=i-0.5&&item.score<i" src="../../static/ic_xing2@3x.png" style="width: 20rpx;height: 20rpx;margin-left: 5rpx;"></image>
										<image v-if="item.score>i-1&&item.score<i-0.5" src="../../static/ic_xing3@3x.png" style="width: 20rpx;height: 20rpx;margin-left: 5rpx;"></image>
									</view> 
									<label style="font-size: 22rpx;">{{item.score}}分</label>
								</view>
								<view v-if="menuId==3" class="items_16" style="float: left;border: none;color: #9D9D9D;text-align: center;font-size: 22rpx;">
									限量抢购&nbsp;|&nbsp;交易保障
								</view>
								<view class="items_16" style="float: left;">
									您有{{item.buy_num}}位邻居已下单
								</view>  
								<view v-if="item.isBook==1" class="items_16" style="float: left;border: none;color: #9D9D9D;text-align: center;font-size: 22rpx;">
									需要预约&nbsp;|&nbsp;交易保障
								</view>
								<view v-if="item.isBook==0" class="items_16" style="float: left;border: none;color: #9D9D9D;text-align: center;font-size: 22rpx;">
									无需预约&nbsp;|&nbsp;交易保障
								</view> 
								
								<view class="goods_item_info_p" v-if="menuId==3">
									<label class="p1" style="font-size: 22rpx;">￥{{item.price}}起</label><label class="p2" style="font-size: 18rpx;">￥{{item.origin_price}}起</label><label class="p3" style="font-size: 22rpx;">{{item.zheKou}}</label>
								</view> 
								<view class="goods_item_info_p" v-if="menuId!=3">
									<label class="p1">￥{{item.price}}</label><label class="p2">￥{{item.origin_price}}</label><label class="p3">{{item.zheKou}}</label>
								</view> 
							 </view> 
						</view>
						<!-- <view @click="moreSearch" v-if="more" style="width: 100%;float: left;line-height: 60rpx;text-align: center;font-size: 25rpx;color: #A9A9A9;">加载更多</view> -->
						<view style="width: 100%;height: 300rpx;float: left;"></view>
					</view>
					<view v-if="goods.length==0">
						<view style="width: 100%;float: left;line-height: 150rpx;text-align: center;font-size: 25rpx;color: #A9A9A9;">暂无数据</view>
					</view>
				</scroll-view>
			</view>  
		</view>
		
	</view>
</template>

<script setup>
	
	import CustomNavigationBar from '@/components/CustomNavigationBar.vue'
	import http from '../../utils/http';
	import {ref} from 'vue';  
	
	const orderStr=ref(); 
	const shotArr=ref([
		{	
			id:1,
			name:'默认排序',
			str:null,
			
		},
		{
			id:2,
			name:'销量优先',
			str:' order by buy_num desc ',
			
		},
		{
			id:3,
			name:'评分优先',
			str:' order by score desc '
		},
		{
			id:4,
			name:'价格高到低',
			str:'  order by price desc '
		},
		{
			id:5,
			name:'价格低到高',
			str:'  order by price asc '
		}
	]);
	const shotIndex=ref(1);
	function selectShot(item){
		shotIndex.value=item.id;
		orderStr.value=item.str; 
		pageIndex.value=1; 
		getGoods();
	}
	
	const menuId=ref('');
	const more=ref(true);
	 
		function upper(){
			//console.log("upperupperupperupperupperupper")
		}
		function lower(){
			console.log("到底部了");
			
			if(more.value){
				moreSearch();
			}
		}
		function scroll(){
			//console.log("scrollscrollscrollscrollscroll")
		}
	import {
		onLoad,
		onPageScroll
	} from '@dcloudio/uni-app';
	onLoad((query) => {
		menuId.value=query.menuId;
		console.log(menuId.value);
		menuInt();
	})
	const goods=ref([]);
	const name=ref("");  
	const menuArr=ref();
	const menuIndex=ref();
	const menuName=ref(); 
	function menuInt(){
		http.request({
			url: "/sys/menu/list",
			method: "POST",
			data: {
				"pid":menuId.value,
			}
		}).then((responseData) => { 
			 if(responseData.code==1){
				menuArr.value=responseData.data;
				console.log(menuArr.value);
				menuIndex.value=menuArr.value[0].id;
				menuName.value=menuArr.value[0].name;  
			 }
			 setJuLi();
		}).catch((err) => {
			uni.showToast({
				icon: 'error',
				title: '请求失败'
			})
		})
	}
	function goodsDetail(item){
		if(menuId.value==3){
			uni.navigateTo({
				url: "/pages/goods/recharge?id="+item.id
			});
			return;
		}
		uni.navigateTo({
			url: "/pages/goods/detail?id="+item.id
		});
	}
	function menuSelect(item){
		if(item.url!=null){
			uni.navigateTo({
				url: item.url
			});
			return;
		}
		pageIndex.value=1;
		menuIndex.value=item.id;
		menuName.value=item.name; 
		getGoods();
	}
	const type=ref([
		{
			id:0,
			name:'全部'
		},{
			id:2,
			name:'正价套餐'
		},
		{
			id:1,
			name:'体验套餐'
		},
		{
			id:3,
			name:'抵扣券'
		}
	]);
	const typeIndex=ref(0);
	function selectType(item){
		pageIndex.value=1;
		typeIndex.value=item.id;
		getGoods();
	}
	function nameQuery(){
		pageIndex.value=1;
		getGoods();
	}
	const pageIndex=ref(1);
	const pageSize=ref(10);
	function moreSearch(){
		pageIndex.value=pageIndex.value+1;
		getGoods();
	}
	function getGoods(){  
		 
		uni.showLoading({
		 	title: '数据加载中',
		 	mask:true
		}); 
		http.request({
			url: "/goods/list",
			method: "POST",
			data: {
				"menuId":menuIndex.value,
				"cateType":typeIndex.value==0?'':typeIndex.value,
				orderStr:orderStr.value,
				"name":name.value,
				city:getApp().globalData.user.city,
				district:getApp().globalData.user.district,
				pageIndex:pageIndex.value,
				pageSize:pageSize.value
			}
		}).then((responseData) => { 
			   
			  if(responseData.code==1){
				  if(responseData.data.length==0){
					  uni.showLoading({
					  	title: '无更多数据',
					  	mask:true
					  });
					  uni.hideLoading();
				  } 
				  for(var i=0;i<responseData.data.length;i++){
					responseData.data[i].juLi=distance(address.value.latitude, address.value.longitude, responseData.data[i].latitude,responseData.data[i].longitude);
					responseData.data[i].zheKou= calculateDiscount(responseData.data[i].origin_price,responseData.data[i].price) 
					var score=responseData.data[i].score/20;
					responseData.data[i].score=score.toFixed(1);
				  }
				  if(responseData.data.length<pageSize.value){
					  more.value=false;
				  }else{
					  more.value=true;
				  }
				  console.log("more",more.value);
				  if(pageIndex.value==1){
					  goods.value=responseData.data;
				  }else{
					  for(var i=0;i<responseData.data.length;i++){
						 goods.value.push(responseData.data[i]) 
					  }
				  }
				  uni.hideLoading();
			  } 
			  
		}).catch((err) => {
			uni.showToast({
				icon: 'error',
				title: '请求失败'
			});
			uni.hideLoading();
		})
	}
	
	// 计算距离
	const address=ref({
		longitude:0,
		latitude:0
	});
 
	function setJuLi(){
		uni.getLocation({
			type: 'wgs84',
			success: function (res) {
				console.log(res)
				console.log('当前位置的经度：' + res.longitude);
				console.log('当前位置的纬度：' + res.latitude);
				address.value.longitude=res.longitude;
				address.value.latitude=res.latitude;  
				getGoods();
			}
		}); 
	}
	
	/**折扣计算
	 * @param {Object} originalPrice 原价
	 * @param {Object} discountPrice 现价
	 */
	function calculateDiscount(originalPrice, discountPrice) {
	  if (discountPrice === 0 || originalPrice === 0) {
	    return 0; // 无折扣或原价为0时，返回0
	  }
	  const zheKou=(discountPrice / originalPrice) * 10; 
	  const length=zheKou.toString().length;
	  if(length>4){
		return zheKou.toFixed(2)+"折";
	  }
	  return zheKou+"折"; // 计算折扣力度并返回
	}
	
	function distance(la1, lo1, la2, lo2) { 
		console.log(la1+"----"+lo1+"----"+la2+"----"+lo2)
        var La1 = la1 * Math.PI / 180.0;  
        var La2 = la2 * Math.PI / 180.0;  
        var La3 = La1 - La2;  
        var Lb3 = lo1 * Math.PI / 180.0 - lo2 * Math.PI / 180.0;  
        var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(La3 / 2), 2) + Math.cos(La1) * Math.cos(La2) * Math.pow(Math.sin(Lb3 / 2), 2)));  
        s = s * 6378.137;//地球半径  
        s = Math.round(s * 10000) / 10000;
		
		if(s<1){
			s=s*1000;
			s= s.toFixed(2);
			s=s+"m";
		}else{
			s= s.toFixed(2);
			s=s+"km"
		} 
		return s;
    }
</script>

<style>
	.tg_01{
		font-size: 25rpx;background: rgba(0, 0, 0, 0.5);width: 100%;height:40rpx;color: white;text-align: center;line-height: 40rpx;margin-top: -40rpx;float: left;border-top-right-radius: 10rpx;
	}
	.dw_1{
		width: 27rpx;height: 27rpx;float: left;
	}
	.goods_item_info_2{
		width: 100%;float: left;font-size: 22rpx;color: #A9A9A9;margin-top:3rpx;line-height: 25rpx;
	}
	.p3{
		color: red;font-size: 25rpx;margin-top: 8rpx;background: #FFE6E5;min-width: 80rpx;float: right;text-align: center;margin-right: 30rpx;border-radius: 12rpx;
	}
	.p2{
		color: #A9A9A9;font-size: 22rpx;text-decoration: line-through;margin-left: 10rpx;
	}
	.p1{
		color: red;font-size: 28rpx;
	}
	.goods_item_info_p{
		width: 100%;float: left;margin-top:3rpx;
	}
	.goods_item_info_1{
		width: 100%;float: left;font-size: 20rpx;color: #A9A9A9;margin-top:3rpx;
	}
	.goods_item_info_title{
		width: 100%;float: left;font-size: 25rpx;font-weight: bold;float: left;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
	}
	.goods_item_info{
		width:295rpx;height: auto;float: left;margin-top: 20rpx;margin-left: 15rpx;
	}
	.goods_img{
		width: 180rpx;height: 145rpx;float: left;
	}
	.goods_item_img{
		width: 180rpx;height: 145rpx;overflow: hidden;border-radius: 10rpx;margin-top: 20rpx;float: left;
	}
	.goods_item{
		width: 95%;float: left;height:auto;margin-left: 5%;
	}
	.type_se{
		color:#2AE8DC;float: left;margin-right: 15rpx;font-size: 25rpx;margin-top: 8rpx;
	}
	.type_def{
		color:#666666;float: left;margin-right: 15rpx;font-size: 25rpx;margin-top: 8rpx;
	}
	.a_menu{
		width: 84%;height: 80rpx;background: white;float: left;margin-left: 8%;margin-top:50rpx;border-radius: 30rpx;
	}
	.info-menu{
		top: 360rpx;position: fixed;width: 30%;height: calc(100% - 360rpx);font-size: 28rpx;
	}
	.main{
		top: 330rpx;position: fixed;width: 100%;height: calc(100% - 300rpx);background: #F6F6F6;border-top-right-radius: 50rpx;border-top-left-radius: 50rpx;
	}
	.info-box{
		top: 330rpx;left: 30%;position: fixed;width: 70%;height: calc(100% - 300rpx);background: white;
	}
	.info-title{
		width: 95%;float: left;height: 50rpx;margin-left: 5%;margin-top: 20rpx;
	}
	.info-item{
		width: 95%;float: left;line-height: 100rpx;margin-left: 5%;margin-top: 20rpx;
	} 
	.sq_select{
		width: 100%;float: left;height: 90rpx;background: white;line-height: 90rpx;text-align: center;border-top-left-radius:25rpx ;border-bottom-left-radius:25rpx ;color: #2AE8DC;font-weight: bold;
	}
	.sq{
		width: 100%;float: left;height: 90rpx;line-height: 90rpx;text-align: center;
	}
	.a_top{
		width: 100%;height: 240rpx;background: #2AE8DC;top: 150rpx;position: fixed;
	}
	.items_16{
		width: 220rpx;height: 30rpx;line-height: 30rpx;font-size: 20rpx;border:1rpx solid #25CAC0;text-align: center;color: #25CAC0;border-radius: 10rpx;float: left;
	}
</style>